* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    padding: 10px;
}
[class *= wrapper]:after {
    content: '';
    display: table;
    clear: both;
}
.wrapper {
    display: block;
    padding: 0;
    margin: 0 -10px;
}
.flow-wrapper {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -10px;
}
[class ^= col-] {
    float: left;
    padding: 10px;
}
[class ^= flex-] {
    padding: 10px;
}
.content {
    height: 50px;
    text-align: center;
    border: 1px solid black;
    background-color: #eee;
}
@media (max-width: 768px) {
    .col-sm-2 {
        width: 16.667%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-8 {
        width: 66.667%
    }
    .col-sm-12 {
        width: 100%
    }
    .flex-sm-2 {
        flex: 0 0 16.667%;
    }
    .flex-sm-3 {
        flex: 0 0 25%;
    }
    .flex-sm-6 {
        flex: 0 0 50%;
    }
    .flex-sm-8 {
        flex: 0 0 66.667%
    }
    .flex-sm-12 {
        flex: 0 0 100%
    }
}
@media (min-width: 767px) {
    .col-md-1 {
        width: 8.333%;
    }
    .col-md-2 {
        width: 16.667%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.3%;
    }
    .col-md-6 {
        width: 50%;
    }
    .flex-md-1 {
        flex: 0 0 8.333%;
    }
    .flex-md-2 {
        flex: 0 0 16.667%;
    }
    .flex-md-3 {
        flex: 0 0 25%;
    }
    .flex-md-4 {
        flex: 0 0 33.3%;
    }
    .flex-md-6 {
        flex: 0 0 50%;
    }
}